<template>
  <div class="approvalList">
    <tab active-color="#43A2FE" v-model="currentIndex">
      <tab-item v-for="(item, index) in list" :key="index" :selected="index===currentIndex">
        <span>{{item}}</span>
      </tab-item>
    </tab>
    <swiper ref="swiper" v-model="currentIndex" :show-dots="false" @on-index-change="setHeight">
      <swiper-item :key="123">
        <group ref="swiper_item" gutter="10px">
          <cell
            v-if="getAuth('expense:requestForm:query')"
            is-link
            title="费用审核"
            :link='{path:"approvalListSearch",query:{type:"5",isApproval:"0"}}'
            :border-intent="false">
            <span slot="after-title" class="after-title">({{count.preRequestCount}})</span>
            <span slot="icon"><img style="height: 20px;margin-right: 10px"
                                   src="~assets/images3/icon-shenhe@3x.png"/></span>
          </cell>
          <cell
            v-if="getAuth('expense:expenseForm:query')"
            title="初审"
            is-link
            :link='{path:"approvalListSearch",query:{type:"1",isApproval:"0"}}'
            :border-intent="false">
            <span slot="after-title" class="after-title">({{count.preFirstCount}})</span>
            <span slot="icon"><img style="height: 20px;margin-right: 10px"
                                   src="~assets/images3/icon-chushen@3x.png"/></span>
          </cell>
          <cell
            v-if="getAuth('expense:expenseForm:query')"
            title="复审"
            is-link
            :border-intent="false"
            :link='{path:"approvalListSearch",query:{type:"2",isApproval:"0"}}'>
            <span slot="after-title" class="after-title">({{count.preSecondCount}})</span>
            <span slot="icon"><img style="height: 20px;margin-right: 10px"
                                   src="~assets/images3/icon-fushen@3x.png"/></span>
          </cell>
        </group>
      </swiper-item>
      <swiper-item :key="456">
        <group ref="swiper_item" gutter="10px">
          <cell
            v-if="getAuth('expense:requestForm:query')"
            is-link
            title="费用审核"
            :border-intent="false"
            :link='{path:"approvalListSearch",query:{type:"5",isApproval:"1"}}'>
            <span slot="after-title" class="after-title">({{count.requestCount}})</span>
            <span slot="icon"><img style="height: 20px;margin-right: 10px"
                                   src="~assets/images3/icon-shenhe@3x.png"/></span>
          </cell>
          <cell
            v-if="getAuth('expense:expenseForm:query')"
            title="初审"
            is-link
            :border-intent="false"
            :link='{path:"approvalListSearch",query:{type:"2",isApproval:"1"}}'>
            <span slot="after-title" class="after-title">({{count.firstAuditCount}})</span>
            <span slot="icon"><img style="height: 20px;margin-right: 10px"
                                   src="~assets/images3/icon-chushen@3x.png"/></span>
          </cell>
          <cell
            v-if="getAuth('expense:expenseForm:query')"
            title="复审"
            is-link
            :border-intent="false"
            :link='{path:"approvalListSearch",query:{type:"3",isApproval:"1"}}'>
            <span slot="after-title" class="after-title">({{count.secondAuditCount}})</span>
            <span slot="icon"><img style="height: 20px;margin-right: 10px"
                                   src="~assets/images3/icon-fushen@3x.png"/></span>
          </cell>
        </group>
      </swiper-item>
    </swiper>
    <div v-transfer-dom>
      <confirm
        v-model="notice"
        :show-cancel-button="false"
        title="提醒"
        @on-confirm="noticePopup">
        <p style="text-align:center;">{{'请先联系管理员为你分配工单后再申请报销'}}</p>
      </confirm>
    </div>
  </div>
</template>

<script>
  import {
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    Group,
    Cell,
    CellBox,
    CellFormPreview,
    Badge,
    Confirm,
    TransferDom
  } from 'vux'

  export default {
    name: "expenseList",
    directives: {
      TransferDom
    },
    components: {
      Tab, TabItem, Swiper, SwiperItem, Group, Cell, CellBox, CellFormPreview, Badge, Confirm
    },
    data() {
      return {
        list: ['待审核', '已审核'],
        currentIndex: 0,
        count:{
          preRequestCount: 0,//费用审批--pre
          preFirstCount: 0,//初审--pre
          preSecondCount: 0,//复审--pre
          requestCount: 0,//费用审批
          firstAuditCount: 0,//初审
          secondAuditCount: 0,//复审
        },
        notice: false,//提示框
      }
    },
    mounted() {
      let params = {
        // firstTrialId:this.$store.state.user.userInfo.id,
        secondTrialId:this.$store.state.user.userInfo.id,
        noPage:true,
        include:true,
        fields:'id,createdTime,fillAmount,status,workOrderCode,firstTrials,secondTrials'
      };
      this.$http.get('/expense/api/expenseForm/audit/count').then(res => {
        this.count = res.data.data
        }
      );
      this.setHeight();
    },
    computed: {},
    methods: {
      // 获取当前审批人列表
      getTrialsPersons(data) {
        if (data.status === 1) {
          return data.firstTrials.map(item => {
            return item.nickName
          }).join(',')
        } else if (data.status === 2) {
          return data.secondTrials.map(item => {
            return item.nickName
          }).join(',')
        }
      },
      //提醒框显示
      noticePopup() {
        this.notice = !this.notice;
      },
      //设置swapper高度
      setHeight() {
        this.$nextTick(() => {
          this.$refs.swiper.xheight = this.$refs.swiper_item.clientHeight + 'px'
        })
      },
    }
  }
</script>

<style lang="less">
  .approvalList {
    .sub-item {
      .weui-cell__ft {
        span, p {
          font-size: 15px;
        }
      }
    }
    .after-title {
      color: #8e8e8e;
      margin-left: .15rem;
    }
    .vux-slider {
      position: absolute;
      left: 0;
      right: 0;
      top: 44px;
      bottom: 0;
      .vux-swiper {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        overflow-y: scroll;
        right: 0;
      }
    }
    .v-transfer-dom {
      .weui-dialog__btn_primary {
        color: #3FBCFC;
      }
    }
    .weui-cells {
      .weui-cell_access {
        .weui-cell__ft:after {
          border-color: #3FBCFC;
        }
      }
    }
  }


</style>
